<template>
  <div class="w_h_100">
    <div class="box">
      <div class="inlet">系统管理 > 权限管理 > <span class="size">角色管理</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>角色明细列表</h4>
        <el-button type="primary" :icon="Plus" @click="addRole" v-hasPerm="'addRole'">新建角色</el-button>
      </div>
      <mytable :fields="tableFields" width="150" ref="tableRef" :values="values" api="roleListByPage" class="m_t_10"
        :isSelection="false">
        <template v-slot:isBiz="{ row }">{{ row.isBiz == 0 ? '是' : '否' }}</template>
        <template v-slot:deleted="{ row }">
          <el-switch v-model="row.deleted" inline-prompt active-text="开" inactive-text="关" :active-value="0"
            :inactive-value="1" @change="changeSwitch(row.id, row.deleted)" style="--el-switch-on-color:#13ce66; " />
        </template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="detail(row)" v-hasPerm="'editRole'">查看详情</span>
            <span class="edit" @click="edit(row)" v-hasPerm="'editRole'">编辑</span>
            <span class="error" @click="deleteOut(row)" v-hasPerm="'deleteRole'">删除</span>
          </div>
        </template>
      </mytable>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { authorityRoleType } from '../../../../type/system'
import { copy } from '../../../../utils/date'
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { roleDel, roleStatus } from '../../../../api/system/authority'
import { Message } from '../../../../utils/resetMessage'
import { useRouter } from 'vue-router'
const values = {
  roleName: '',
  deptName: '',
  deleted: null,
}
export default defineComponent({
  name: '',
  setup() {
    const data: authorityRoleType = reactive({
      fields: [
        {
          label: "角色名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth:'70px'
        },
        {
          label: "角色状态",
          prop: 'deleted',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          prop: 'button'
        }
      ],
      options: {
        deleted: [
          {
            name: '启用',
            id: '0',
          },
          {
            name: '禁用',
            id: '1',
          },
        ],
      },
      tableFields: [
        {
          label: '角色名称',
          prop: 'roleName',
        },
        {
          label: '角色状态',
          prop: 'deleted',
        },
      ],
      values: copy(values),
    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const tableRef = ref()
    const ruleFrom = ref()
    const router = useRouter()
    const methods = {
      //表格数据重置
      resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      deleteOut(row: any) {
        let val=`是否删除"${row.roleName}"?`
        ElMessageBox.confirm(
          val,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
          }
        )
          .then(() => {
            roleDel({ id: row.id }).then(() => {
              Message({ type: 'success', message: '删除成功' })
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
            })
          })
      },
      //是否禁用当前角色
      changeSwitch(id: number, status: number) {
        if (!id) return
        roleStatus({ id: id, status: status }).then(() => {
          Message({ type: 'success', message: '操作成功' })
        })
      },
      addRole() {
        router.push('/system/authority/role/add')
      },
      edit(row:any){
        router.push({path:'/system/authority/role/edit',query:{id:row.id,roleCode:row.roleCode}})
      },
      detail(row:any){
        router.push({path:'/system/authority/role/detail',query:{id:row.id,roleCode:row.roleCode}})
      }
    }
    return {
      ...toRefs(data),
      ...methods, tableRef,
      Search, Plus, ruleFrom
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}
</style>
<style lang="scss">
.dept {
  .el-input {
    width: 100% !important;
  }
}
</style>